<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,400i,700,900|Montserrat:100,200,300,400,400i,500,600,700,800,900" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Custom Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<section class="contactus-one" id="contactus"><!-- Section id-->
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3652.1435118487834!2d73.09695287259558!3d23.742261243014283!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395d97dd1a0a0f73%3A0x1c89ba6d8d4d240!2sBolundra%2C+Gujarat+383421!5e0!3m2!1sen!2sin!4v1500617103857" height="580" ></iframe>
</div>
</div>
<div class=" col-md-5 col-sm-6">
<div class="contact-block">
<div class="dart-headingstyle-one dart-mb-20"> <!--Style 1-->
<h2 class="dart-heading">Contact US</h2>
</div>
<div class="contact-form"><!-- contact form -->
<form class="row" action="send_email.php" id="contact" name="contact" method="post" >
<div class="form-group col-md-6">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Your Name" required >
</div>
<div class="form-group col-md-6">
<input type="email" class="form-control" name="InputEmail" id="InputEmail" placeholder="Your Email" required >
</div>
<div class="form-group col-md-12">
<input type="text" class="form-control" name="InputWeb" id="InputWeb" placeholder="Web Site (Optional)" >
</div>
<div class="form-group col-md-12">
<textarea class="form-control" name="InputMessage" id="InputMessage" rows="4" placeholder="Message" required ></textarea>
</div>
<div class="col-md-12">
<button name="submit" type="submit" class="btn normal-btn dart-btn-xs">SEND MESSAGE</button>
</div>
</form>
</div>
<hr>
<div class=" row contact-info">
<div class="col-md-12 col-sm-12">
<p class="addre"><i class="fa fa-map-marker"></i>AT & PO. BOLUNDRA (R) TA.IDAR ,DIST.S.K GUJARAT INDIA - 383421</p>
</div>
<div class="col-md-12 col-sm-12">
<p class="phone-call"><i class="fa fa-phone"></i> <a href="tel:+10484579845">+12 345 789 1234</a></p>
</div>
<div class="col-md-12 col-sm-12">
<p class="mail-id"><i class="fa fa-envelope"></i>contact@yourcompany.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
h1, h2, h3, h4, h5, h6 {
color: #1b1b1b;
font-family: "Montserrat",sans-serif;
}
body {
color: #898989;
font-family: "Lato",sans-serif;
}
/*---contact form---*/
.contactus-one .contact-form .form-control {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #fff;
border-radius: 0px;
background-color: transparent;
color: #fff;
height: 50px;
}
.contactus-one .contact-form .form-control {
border-bottom: 1px solid #ccc;
box-shadow: none;
}
.contact-info > div > p {
margin-bottom: 10px;
}
.contactus-one .contact-info p i {
margin-right: 15px;
color: #ee2b63;
}
.map iframe {
pointer-events: none;
width: 100%;
border: none;
}
.map {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.map iframe{
pointer-events: none;
width:100%;
border:none;
}
.contactus-one .dart-headingstyle-one .dart-heading:after{
left:15px;
}
.normal-btn {
background: #ee2b63 none repeat scroll 0 0;
border-radius: 5px;
color: #ffffff;
margin-bottom: 10px;
margin-top: 10px;
text-transform: uppercase;
}
